<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Facelet Title</title>
    </h:head>

    <h:body>


        <ui:composition template="/template/common/commonLayout.xhtml">                

            <ui:define name="content">
                
                <p:growl id="growl" life="5000"/>

                <p:layoutUnit position="center">


                    <div align="center">

                        <p:panelGrid columns="1" styleClass="mainTitleBox">
                            <h:outputText value="Clientes" styleClass="mainTitle"/>
                        </p:panelGrid>

                        <h:form id="form">                  
                           
                            
                            <p:panelGrid columns="3" columnClasses="nothing, nothing, noBorderColumn" styleClass="showTable">
                                
                                <h:outputText value="Identificación Cliente" styleClass="mainTitle"/>
                                <p:inputText  id="inputCusId" value="#{CustomerBean.customerId}" maxlength="20" required="false">
                                <f:validateRegex pattern="([1-9]+)|(\A\z)"/>
                                </p:inputText>
                                <p:message for="inputCusId" showDetail="false" showSummary="true"/>
                                
                            </p:panelGrid>
                            
                            <div align="center">                                
                                
                                <h:commandLink action="#{CustomerBean.findCustomer}" styleClass="commonLinkButton">
                                    <h:graphicImage url="/resources/images/find.png" title="titulo"/>
                                    <h:outputFormat value="Buscar"/>
                                    
                                </h:commandLink>
                                
                            </div>
                            
                            
                            <p:dataTable var="cus"
                                         rows="10"
                                         value="#{CustomerBean.dtos}" 
                                         paginator="true"                                     
                                         selection="#{CustomerBean.selected}"                                         
                                         id="campainsTable"                                     
                                         rowKey="#{cus.cusid}"
                                         style="width: 700px; height: auto; padding-top: 15px; padding-bottom: 15px">

                                <f:facet name="header">
                                    Clientes
                                </f:facet>   
                                <p:ajax event="rowSelect" listener="#{CustomerBean.onRowSelect}" />
                                <p:ajax event="rowUnselect" listener="#{CustomerBean.onRowUnselect}"/>
                                
                                <p:column selectionMode="single" style="width:16px;text-align:center">
                                    <f:param name="icusid" value="#{cus.cusid}"/>
                                </p:column>

                                <p:column headerText="Identificación Cliente">
                                    <h:outputText value="#{cus.cusid}"/>
                                </p:column>

                                <p:column headerText="Nombre Cliente">
                                    <h:outputText value="#{cus.fname}"/>
                                </p:column>
                                
                                <p:column headerText="Estado Cliente">
                                    <h:outputText value="#{cus.status}"/>
                                </p:column>

                                <f:facet name="footer">                                    
                                    <p:commandButton action="#{CustomerBean.goToDetails}"                                                     
                                                     icon="ui-icon-search"  
                                                     immediate="false"
                                                     disabled="#{CustomerBean.active}"
                                                     value="Ver Detalles">
                                    </p:commandButton>
                                </f:facet>

                            </p:dataTable>

                        </h:form>

                    </div>

                </p:layoutUnit>

            </ui:define>

        </ui:composition>

    </h:body>
</html>